<template>
  <div>
    <hsa-adaptive-container>
      <hsa-adaptive-pane>
        <hsa-title-pane>
          <hsa-title-pane-item title="查询条件">
            <t-query-condition
              :opts="opts"
              @submit="conditionEnter"
              @handleEvent="handleEvent"
              isExpansion
              isShowWidthSize
              :widthSize="4"
            />
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
      <hsa-adaptive-pane autoHeight>
        <hsa-title-pane>
          <hsa-title-pane-item title="取数任务">
            <template #toolbar>
              <el-button type="primary" @click="addTask">新增</el-button>
            </template>
            <div>
              <t-table
                :table="table"
                :columns="table.columns"
                :tableLoading="tableLoading"
                @page-change="pageChange"
                @size-change="sizeChange"
                isPaginationCumulative
              />
            </div>
          </hsa-title-pane-item>
        </hsa-title-pane>
      </hsa-adaptive-pane>
      <fetch-task-edit ref="myTaskEdit" @successHand="getData" />
    </hsa-adaptive-container>
  </div>
</template>
<script setup lang="ts">
import fetchTaskEdit from "./model/fetch-task-edit.vue";
import { ElMessage, ElMessageBox } from "element-plus";
// import hsaAdaptiveContainer from '@/components/hsa/adaptive/container.vue'
// import hsaAdaptivePane from '@/components/hsa/adaptive/pane.vue'
// import HasTitle from "@/components/hsa/title-box.vue";
import { onMounted, computed, reactive, toRefs, ref } from "vue";
import apiAxios from "@/api/SelfFetch/fetch-task-manage";
import { PAth } from "@/api/SelfFetch/query";
const queryFrom = ref(PAth());
const tableLoading = ref<boolean>(false);
const myTaskEdit = ref(null);
const addTask = () => {
  myTaskEdit.value.open("取数任务");
};
const edit = (val: any) => {
  myTaskEdit.value.open("取数任务", Object.assign({}, { ...val }));
};
const del = (val: any) => {
  console.log("nullify", val);
  ElMessageBox.confirm(`确认删除？`, "提示")
    .then(async () => {
      try {
        await apiAxios.delData({
          id: val.id,
        });
        ElMessage({
          type: "success",
          message: "删除成功!",
        });
        getData();
      } catch (err) {
        ElMessage({
          message: "删除失败",
          type: "error",
          showClose: false,
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
const setHandle = async (val: any,key: string) => {
  let keyVal = key == "pauseData" ? "暂停" : "重启";
  try {
    await apiAxios[key]({
      id: val.id,
    });
    ElMessage({
      type: "success",
      message: keyVal + "成功!",
    });
    getData();
  } catch (err) {
    ElMessage({
      message: keyVal + "失败",
      type: "error",
      showClose: false,
    });
  }
};
const copyHandle = async (val: any) => {
  try {
    await apiAxios.copyData({
      id: val.id,
    });
    ElMessage({
      type: "success",
      message: "复制成功!",
    });
    getData();
  } catch (err) {
    ElMessage({
      message: "复制失败",
      type: "error",
      showClose: false,
    });
  }
};
const table = ref<TableTypes.Table>({
  firstColumn: { type: "index", width: 80, fixed: true },
  total: 20,
  currentPage: 1,
  pageSize: 10,
  layout: "total,sizes, slot, prev, pager, next, jumper",
  prevText: "上一页",
  nextText: "下一页",
  // 接口返回数据
  data: [],
  // 表头数据
  columns: [
    { prop: "name", label: "取数任务名称" },
    { prop: "dscr", label: "任务描述" },
    {
      prop: "type",
      label: "取数类型",
      render: (text: any, record: { type: string; }) => {
        let arr = state.fetchType.filter((it) => it.key == record.type);
        let val = arr && arr.length > 0 ? arr[0].label : "";
        return val;
      },
    },
    { prop: "crte", label: "创建时间" },
    { prop: "status", label: "状态" },
  ],
  // 表格内操作列
  operator: [
    {
      text: "编辑",
      fun: edit,
    },
    {
      text: "复制",
      fun: copyHandle,
    },
    {
      text: "暂停",
      show: { key: "status", val: ["启动中"] },
      fun: (row, $index, tableData) => setHandle(row, "pauseData"),
    },
    {
      text: "重启",
      show: { key: "status", val: ["已完成"] },
      fun: (row, $index, tableData) => setHandle(row, "restartData"),
    },
    {
      text: "删除",
      fun: del,
      bind: {
        type: "danger",
        text: true,
      },
    },
  ],
  // 操作列样式
  operatorConfig: {
    // fixed: "right", // 固定列表右边（left则固定在左边）
    width: 200,
    label: "操作",
  },
});
let state = reactive({
  fetchType: [
    {
      label: "立即取数",
      key: "0",
    },
    {
      label: "预约取数",
      key: "1",
    },
    {
      label: "周期取数",
      key: "2",
    },
  ],
});
const opts = computed(() => {
  return {
    name: {
      label: "取数任务名称",
      comp: "el-input",
    },
  };
});
onMounted(() => {
  getData();
});
const getData = async () => {
  tableLoading.value = true;
  let res;
  let obj = {
    ...queryFrom.value,
    pageNumber: table.value.currentPage,
    pageSize: table.value.pageSize,
  };
  res = await apiAxios.getQueryList(obj);
  tableLoading.value = false;
  if (res) {
    table.value.total = res.total;
    table.value.data = res.result;
  }
};
// 查询条件change事件
const handleEvent = (type: any, val: any) => {
  // console.log(111, type, val)
  switch (type) {
    case "date":
      console.log("获取event==date的数据", val);
      break;
  }
};
// 点击查询按钮
const conditionEnter = (data: any) => {
  for (const key in data) {
    if (data[key] == null || data[key] == "") {
      data[key] = undefined;
    }
  }
  queryFrom.value = data;
  getData();
};
// 选择当前页码
const pageChange = (page: any) => {
  table.value.currentPage = page;
  getData();
};
// 选择当页条数
const sizeChange = (size: any) => {
  table.value.currentPage = 1;
  table.value.pageSize = size;
  getData();
};
</script>

<style lang="scss" scoped></style>
